<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
			<button type="primary" @click="onSearch">搜索</button>
			
			<!-- <view class="search-options">
				<!-- 这里可以添加选项卡，如地图、横式等，但在此示例中简化处理 -->
			<!-- </view> -->
		</view>
		
		<button @click="tuangou">团购</button>
		<button @click="car">我的车辆</button>

		<!-- 数字序列 -->
		<view class="number-sequence">
			<a>{{ numbers[0] }}#</a>
			<a>{{ numbers[1] }}#</a>
			<a>{{ numbers[2] }}#</a>
			<a>{{ numbers[3] }}#</a>
			<a>{{ numbers[4] }}#</a>
		</view>

		<!-- 加油站信息 -->
		<view class="gas-station-list">
			<block v-for="(station, index) in gasStations" :key="index">
				<!-- <view>
	      <map :latitude="latitude" :longitude="longitude" :scale="14" :markers="markers"></map>
	    </view> -->
				<view class="gas-station-item">
					<!-- <text>{{ station.name }}</text>  
          <text>{{ station.distance }}m</text>  -->
					<view class="one">
						<a class="name" @click="xiche">{{ station.name }}</a>
						<a class="juli">{{ station.distance }}m</a>
					</view>
					<!-- <text class="youhui">满{{ station.youhui  }}减{{ station.manjian }} 满{{ station.youhui2 }}减{{ station.manjian2 }}</text>
		   -->
					<view>
						<tetx class="youhui">满{{ station.youhui  }}减{{ station.manjian }}</tetx>
						<tetx class="youhui">满{{ station.youhui2  }}减{{ station.manjian2 }}</tetx>
					</view>

					<!-- <image class="workshop-image" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.OnErMREin3xuBZpdQ3EWMwHaEX?rs=1&pid=ImgDetMain" mode="widthFix"></image>
		  <text>营业时间：周一至周五</text>  
          <text>¥{{ station.pricePerLiter }}/升</text>  
          <text>{{ station.address }}</text> -->
					<view class="content">
						<image class="workshop-image"
							src="https://tse3-mm.cn.bing.net/th/id/OIP-C.OnErMREin3xuBZpdQ3EWMwHaEX?rs=1&pid=ImgDetMain"
							mode="widthFix" @click="xiche"></image>
						<view class="xinxi">
							<view class="info-text">营业时间：周一至周五</view>
							<view class="price-text">¥{{ station.pricePerLiter }}/升</view>
							<view class="address-text" @click="ditu(station)">{{ station.address }}</view>
						</view>

					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ListComponent',
		data() {
			return {
				gasStations: [{
					id:1,
						name: '中国石油加油站',
						distance: '556',
						pricePerLiter: 5.66,
						img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.OnErMREin3xuBZpdQ3EWMwHaEX?rs=1&pid=ImgDetMain',
						youhui: 200,
						manjian: 20,
						youhui2: 500,
						manjian2: 70,
						address: '山阳区人民路与解放路交叉口'
						// 注意：满减活动和营业时间在此简化处理，可以根据需要添加  
					},
					{
						// 如果有第二个加油站的信息，可以在这里添加  
						// ... 
						id:2,
						name: '中国石油加油站2',
						distance: '556',
						pricePerLiter: 5.66,
						img:'https://ts1.cn.mm.bing.net/th/id/R-C.24545a690fcef05c8426a62c8ab2242c?rik=CxDfOMNu5fDVFQ&riu=http%3a%2f%2fwww.btsdxgt.com%2fimg%2fupimages%2f2019082223521163.jpg&ehk=rnevyOYouEng3vAQsIG5qVLjMVeDn3OInHHl5UIwB7U%3d&risl=&pid=ImgRaw&r=0',
						youhui: 200,
						manjian: 20,
						youhui2: 300,
						manjian2: 40,
						address: '山阳区人民路与解放路交叉口2'
					},
					{
						// 如果有第二个加油站的信息，可以在这里添加  
						// ... 
						id:3,
						name: '中国石油加油站3',
						distance: '556',
						pricePerLiter: 6.66,
						youhui: 200,
						manjian: 20,
						youhui2: 300,
						manjian2: 40,
						address: '山阳区人民路与解放路交叉口3'
					}
				],
				numbers: ['90', '92', '93', '95', '98']
			};
		},
		methods: {
			onSearch() {
				// 处理搜索逻辑，这里可以调用API或进行其他操作  
				console.log('搜索功能尚未实现');
			},
			tuangou(){
				uni.navigateTo({
					url:"/pages/buyPreferential/buyPreferential"
				})
			},
			xiche(){
				uni.navigateTo({
					url:"/pages/gasoline/carWash"
				})
			},
			car(){
				uni.navigateTo({
					url:"/pages/mycar/mycar"
				})
			},
			// ditu(){
			// 	uni.navigateTo({
			// 		url:"/pages/gasoline2/gasoline2"
			// 		// url:"/pages/gasoline2/gasoline2?id=${index}"
			// 	})
			// }
			ditu(station){
				let objStr = JSON.stringify(station);
				 let oo = JSON.parse(objStr);
				 console.log(oo);
				console.log(station);
				console.log(objStr);
				uni.navigateTo({
					url:'/pages/gasoline/gasoline2?id='+station.id+
					'&name='+station.name+
					'&address='+station.address
					// url:"/pages/gasoline2/gasoline2?id=${index}"
					
					
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.button {
		margin-left: 10px;
		padding: 10px 20px;
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 4px;
	}

	.search-options {
		margin-left: auto;
		/* 这里可以添加选项卡样式，但在此示例中简化处理 */
	}

	.gas-station-list {
		margin-top: 20px;
	}

.one{
	display: flex;
	justify-content: space-between;
}
	.name {
		font-size: 20px;
		font-weight: bold;
	}
	.youhui {
		background-color: crimson;
		margin-left: 5px;
		
	}

	.gas-station-item {
		margin-bottom: 20px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background-color: #f9f9f9;
	}

	.gas-station-item text {
		display: block;
		margin-bottom: 5px;
	}


	.number-sequence {

		width: 90%;
		/* 你可以根据需要调整宽度 */
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		/* 数字之间的间距 */
	}

	.number-sequence a {
		background-color: aqua;
		font-size: 24px;
		/* 你可以根据需要调整字体大小 */
		color: #000000;
		/* 字体颜色，通常为黑色 */
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		/* align-items: center;  
  justify-content: center; */
	}

	.workshop-image {
		width: 120px;
		height: 75px;
		/* 根据需要调整图片宽度 */
		height: auto;
		/* 保持图片比例 */
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		/* float: left; */
	}

/* .xinxi{
	float: left;
	} */
	.info-text,
	.price-text,
	.address-text {
		font-size: 14px;
		color: #333333;
		/* margin-bottom: 2px; */
		margin-left: 10px;
		
	}
</style>